<template>
  <div class="main-container c21">
    <div class="dataBox df">
      <div class="df order-total bgcfff jcsb aic">
        <i class="iconfont icon-dingdanguanli1 fwb" style="color: #1296db"></i>
        <div class="df fdc">
          <span class="cccc">总订单</span>
          <span>{{ data.totalOrder }}</span>
        </div>
      </div>
      <div class="df order-total bgcfff jcsb aic">
        <i class="iconfont icon-huobi2-copy fwb" style="color: #ffb900"></i>
        <div class="df fdc">
          <span class="cccc">总销售额</span>
          <span>{{ data.totalAmount }}</span>
        </div>
      </div>
      <div class="df order-total bgcfff jcsb aic">
        <i class="iconfont icon-wenjian" style="color: #1296db"></i>
        <div class="df fdc">
          <span class="cccc">今日订单</span>
          <span>{{ data.todayOrder }}</span>
        </div>
      </div>
      <div class="df order-total bgcfff jcsb aic" style="margin-right: 0">
        <i class="iconfont icon-huobi_A fwb" style="color: #009688"></i>
        <div class="df fdc">
          <span class="cccc">今日销售额</span>
          <span>{{ data.totayAmount }}</span>
        </div>
      </div>
    </div>
    <div class="echarts bgcfff p20">
      <div id="myChart"></div>
    </div>
  </div>
</template>

<script>
import { getdata } from "@/apis/echarts";
export default {
  data() {
    return {
      data: {},
    };
  },
  mounted() {
    getdata().then((res) => {
      console.log(res.data);
      this.data = res.data;
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "数据统计",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["订单数据", "销售额数据"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.data.xData,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "订单数据",
            type: "line",
            stack: "总量",
            data: this.data.orderData,
          },
          {
            name: "销售额数据",
            type: "line",
            stack: "总量",
            data: this.data.amountData,
          },
        ],
      });
    });
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.main-container {
  .dataBox {
    margin-bottom: 60px;
    div {
      width: 25%;
      padding: 20px;
      margin-right: 20px;
      .iconfont {
        font-size: 45px;
        flex: 1;
      }
      .icon-wenjian {
        font-size: 54px;
      }
      div {
        text-align: center;
        padding: 0;
        flex: 1;
      }
    }
  }
  #myChart {
    width: 100%;
    height: 500px;
  }
}
</style>